<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div>hello</div> -->
    <button>点击显示时间</button>
    <div>时间</div>
    <script>
        //事件的执行步骤
        //1、获取事件源
        // var div = document.querySelector('div');
        // //2、绑定事件 注册事件
        // div.onclick
        // //3、添加事件处理程序
        // div.onclick = function(){
        //     console.log("HELLO");
        // }

       //2、操作元素，修改元素的内容
       //实例：当点击按钮之后，div里的内容改变
       //（1）、获取事件源
       var btn = document.querySelector('button');
       var di = document.querySelector('div')
       //(2)、注册事件
       btn.onclick = function(){
        //    di.innerText = '2019-02-02'
        di.innerText = getDate();
       }
       //获取系统时间
       //通过一个函数来实现调用当前的系统时间
       function getDate(){
           var date = new Date();
           var year = date.getFullYear();//获取当前的年
           var month = date.getMonth()+1;//获取当前的月
           var date = date.getDate();//获取当前的日
           //时间获取完后把值返回给函数
           return "今天是：" + year + '年'+month + '月'+date+'日'
       }


       
    </script>
</body>
</html>